import React from "react";
import { connect } from "react-redux";
import {NavLink,Route} from 'react-router-dom'
import { fetchList, addToCart} from "../actions/product";
import 'element-theme-default';
import {Button,input} from 'element-react'
import { Content,MIss} from "../Components";
import axios from 'axios';

class Product extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        nav:[]
    }
  }
  componentWillMount() {
    this.props.fetchList();
    axios.post('http://localhost:3000/cate/list/0', {
         
    })
    .then((res) =>{
    //  console.log(res.data);
      this.setState({
          nav:res.data
      })

    })
    .catch(function (error) {
      console.log(error);
    });

    this.getData({});

  }

  changePage(e) {
    var page = e.currentTarget.getAttribute("data-page");
    var params = { page: parseInt(page), limit: 4 };
    this.props.fetchList(params);
  }

  addCart(e) {
    const idx = parseInt(e.currentTarget.getAttribute("data-idx"));
    const addToCartProduct = this.props.lists.docs[idx];
    // console.log( addToCartProduct)
    this.props.addToCart(addToCartProduct);
  }


  getData(obj){
       
    
    this.props.fetchList(obj)
}

  findbytitle(){
    var title=$('.findtitle').val();
    // console.log(title)
    // this.getData({title:title});
    this.props.fetchList({title:title})
}



  render() {
   

    //链接跳入
    var nav=this.state.nav;
    var navs=[];
    navs.push(
      <NavLink  className="list-group-item"  activeClassName="active" to="/" >全部商品
      </NavLink>
    )
    console.log(this.props.match.url)
    for(var i=0;i<nav.length;i++){
        navs.push(
          <NavLink key={i} className="list-group-item" 
            to={`${this.props.match.url}/${nav[i]._id}`}>
            {nav[i].title}
          </NavLink>
        )
    }

    

    // console.log('this.props',this.props);
    const { lists, fetchList, addToCart, carts } = this.props;
    var ls = [];
    if (!lists) {
      return <li>数据加载中。。。。。</li>
    }
    console.log('lists',lists);
    for (let i = 0; i < lists.docs.length; i++) {
      ls.push(
        <li className="span4" key={i}>
          <a href="#" className="thumbnail">
            <img data-src="holder.js/300x200" src={`../../public/img/${lists.docs[i].pic}`} alt="" />
            <h2>{lists.docs[i].title}</h2>
            <p>单价：{lists.docs[i].price}元</p>
            <p>
                <NavLink to={`productdetail/${lists.docs[i]._id}`} activeClassName="active">
                     <button className="btn  btn-primary">进入详情页</button>
                </NavLink>
              <a
                className="btn btn-danger"
                href="javascript:void(0)"
                role="button"
                data-idx={i}
                onClick={e => this.addCart(e)}
              >
                加入购物车
              </a>
            </p>
          </a>
        </li>
      );
    }

    //分页
    var pages = 1;
    var outputPages = [];
    pages = lists.pages;
    for (let i = 1; i <= pages; i++) {
      outputPages.push(
        <li key={i}>
          <a
            href="javascript:void(0)"
            data-page={i}
            onClick={e => this.changePage(e)}
          >
            {i}
            <span className="sr-only" />
          </a>
        </li>
      );
    }

    return (
      <div>
         <div className="container">
          <div className="navbar navbar-static-top" >
            
              
              <div className="col-lg-6">
              {navs}
              <br/><br/>
              <div className="input-group">
             
                  <input type="text" className="form-control findtitle" placeholder="Search for..."/>
                  <span className="input-group-btn">
                      <button className="btn btn-default" type="button" onClick={this.findbytitle.bind(this)}>搜索</button>
                  </span>
              </div>
            </div>
           </div>
{/* 搜索框 */}
            
            <div  className="container">
                {/* 设参数 */}     
                <Route path={`${this.props.match.url }/:id`} component={MIss} ></Route>
            </div>
        </div> 
        

        {/* 显示全部内容 */}

        <div className="container marketing">
          <div className="row">
            <ul className="thumbnails">{ls}</ul>
          </div>
        </div> 
        <br />
        <nav aria-label="..."><ul className="pagination">{outputPages}</ul></nav>
      </div>
    );
  }
}

const getValue = state => {
  // console.log(state);
  return {
    lists: state.product.lists,
    carts: state.product.carts
  };
};
export default connect(getValue, { fetchList, addToCart})(Product);
